<template>
    <div class="deep-data">
        <div class="flex justify-between text-grey font-24">
            <div>
                <div>{{ $t('价格') }}</div>
                <div class="mt-5">(USDT)</div>
            </div>
            <div class="text-right items-end justify-end">
                <div class="">{{ $t('数量') }}</div>
                <div class="mt-5">({{ symbol.toUpperCase() || '--' }})</div>
            </div>
        </div>
        <div class="flex justify-between pt-6 pb-6 font-26" v-for="(item, index) in greenData" :key="index"
            @click="onPrice(item.price)" :style="{
                'background': `linear-gradient(to right,${THEME == 'dark' ? '#1E2030' : '#ffffff'} 0%` +
                    (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) ' +
                    (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) 100%)'
            }">
            <div class="text-green">{{ item.price || '--' }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib' || symbol == 'btt'">{{ fixDate(item.amount, $i18n) ||
                '--' }}</div>
            <div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
        </div>
        <div class="text-red pt-16 font-34 font-700 text-center">{{ price || '--' }}
        </div>
        <div class="approximately-text pb-10 font-20 text-center textColor">≈{{ ((price *
            currency.rate).toFixed(price.toString().split('.')[1] ?
                price.toString().split('.')[1].length : 2)) || '--' }}</div>
        <div class="flex justify-between pt-6 pb-6 font-26" v-for="(item, index) in redData" :key="item + index"
            @click="onPrice(item.price)" :style="{
                'background': `linear-gradient(to right,${THEME == 'dark' ? '#1E2030' : '#ffffff'} 0%` +
                    (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) ' +
                    (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) 100%)'
            }">
            <div class="text-red ">{{ item.price || '--' }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib' || symbol == 'btt'">{{ fixDate(item.amount, $i18n) ||
                '--' }}</div>
            <div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
        </div>
    </div>
</template>

<script>
import { WS_URL } from '@/config'
const DEEP_LENGTH = 6
import { fixDate } from "@/utils/utis";
import { THEME } from '@/config/theme'
import { mapGetters } from 'vuex'
export default {
    name: 'TradeDeepData',
    props: {
        symbol: {
            type: String,
        },
        price: {
            type: String
        }
    },
    data() {
        const init = []
        for (let i = 0; i < DEEP_LENGTH; i++) {
            init.push({ amount: '', price: '' })
        }
        return {
            THEME,
            fixDate,
            greenData: init,
            redData: init,
            socket: null
        }
    },
    mounted() {
        // this.startDeepSocket()
    },
    computed: {
        ...mapGetters({ currency: 'home/currency' })
    },
    watch: {
        symbol(val) {
            this.startDeepSocket()
        }
    },
    methods: {
        startDeepSocket() { // 开启socket链接
            this.closeSocket()
            console.log('start deep')
            this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`)
            this.socket.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    this.handleDeep(_data)
                }
            }
        },
        handleDeep(data) { // 格式化数据
            this.deepData = data
            const { asks, bids } = data
            this.redData = asks.sort((prev, next) => prev.price - next.price).slice(0, DEEP_LENGTH)
            this.greenData = bids.sort((prev, next) => prev.price - next.price).slice(-DEEP_LENGTH)
        },
        onPrice(price) {
            this.$emit('price', price)
        },
        closeSocket() {
            this.socket && this.socket.close()
            this.socket = null
        },
    },
    activated() {
        this.startDeepSocket()
    },
    deactivated() {
        this.closeSocket()
    },
    beforeDestroy() { //
        this.socket && this.socket.close()
        this.socket = null
    }

}    
</script>